<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>拖放排序</title>
<style>

    .container {
        border: 1px solid red;
        height: 450px;
        padding: 10px;
        position: relative;
    }

    .component {
        margin: 50px 10px;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid black;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        overflow: hidden;
    }

    .cheader {
        cursor: move;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
    }

    #drop, #drop3 {
        border: 1px solid green;
        height: 130px;
        line-height: 100px;
    }

    .ks-dd-drag-over {
        background: #a52a2a;
    }

    .ks-dd-drop-over {
        background: #fa8072;
    }

    #container3 .component .cheader {
        cursor: move;
    }
</style>
</head>
<body>

<h2>交换排序</h2>


<div id="container2" class="container">

    <div id="c11" class="component">
        <div class="cheader">
            拖动头
        </div>
        1 intersect drag
    </div>

    <div id="c21" class="component">
        <div class="cheader">
            拖动头
        </div>
        2 point drag
    </div>

    <div id="c31" class="component" style="width:250px">
        <div class="cheader">
            拖动头
        </div>
        3 point drag with proxy
    </div>
</div>
<script src="../../../build/kissy.js"></script>

<script src="../ddm.js"></script>
<script src="../draggable.js"></script>
<script src="../droppable.js"></script>
<script src="../proxy.js"></script>
<script src="../draggable-delegate.js"></script>
<script src="../droppable-delegate.js"></script>
<script src="../scroll.js"></script>
<script src="../../dd.js"></script>
<script>

    var S = KISSY;

    KISSY.use("node,dd", function(S, Node, DD) {
        var DDM = DD.DDM,
                $ = Node.all,
                DraggableDelegate = DD.DraggableDelegate,
                Draggable = DD.Draggable,
                Droppable = DD.Droppable,
                Proxy = DD.Proxy;

        /**
         * 拖放排序
         */

        S.ready(function() {

            var p = new Proxy({
                /**
                 * 如何产生替代节点
                 * @param drag 当前拖对象
                 */
                node:function(drag) {
                    var n = S.one(drag.get("dragNode").clone(true));
                    n.attr("id", S.guid("ks-dd-proxy"));
                    n.css("opacity", 0.2);
                    return n;
                }
            });
            var c11 = new Draggable({
                node:"#c11",
                move:1,
                //模式，
                // intersect :区域相交就算enter
                // strict : drag 区域完全在 drop 区域内才算
                // point : 鼠标在 drop 区域内
                //默认 point
                mode:Draggable.INTERSECT,
                handlers:["#c11 .cheader"]
            }),c11d = new Droppable({node:"#c11"});


            var c31 = new Draggable({
                node:"#c31",
                move:1,
                handlers:[S.one("#c31 .cheader")]
            }),c31d = new Droppable({node:"#c31"});


            p.attach(c31);

            var c21 = new Draggable({
                node:"#c21",
                move:1,
                mode:Draggable.INTERSECT,
                handlers:[S.one("#c21 .cheader")]
            }),c21d = new Droppable({node:"#c21"});


            function onDropHit(ev) {
                var drag = ev.drag,drop = ev.drop;
                var tmp = $("<div>").insertBefore(drop.get("node"));
                var dropParent = drop.get("node")[0].parentNode;
                drag.get("dragNode")[0].parentNode.replaceChild(drop.get("node")[0],
                        drag.get("dragNode")[0]);

                dropParent.replaceChild(drag.get("dragNode")[0],
                        tmp[0]);
            }

            c21.on("dragdrophit", onDropHit);
            c11.on("dragdrophit", onDropHit);
            c31.on("dragdrophit", onDropHit);

        });


    });


</script>
</body>
</html>